<template>
  <div>
    <!-- 文本域 -->
    <textarea
      cols="40"
      rows="5"
      v-model="str1"
      placeholder="请输入自我介绍"
    ></textarea>
  </div>
  <!-- 下拉菜单 -->
  <div>
    <p>请输入您想去的城市</p>
    <select v-model="city">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="sz">深圳</option>
      <option value="hz">杭州</option>
    </select>
  </div>
  <br />
  <br />
  <br />
  <br />
  <br />

  <!-- 选项-单选框 -->
  <div>
    请选择您的血型
    <input type="radio" value="a" v-model="blood" />A
    <input type="radio" value="b" v-model="blood" />B
    <input type="radio" value="ab" v-model="blood" />AB
    <input type="radio" value="o" v-model="blood" />O
  </div>

  <br /><br /><br />
  <div>
    <input type="checkbox" value="dyx" v-model="hobby" />打游戏
    <input type="checkbox" value="zq" v-model="hobby" />足球
    <input type="checkbox" value="lq" v-model="hobby" />篮球
    <input type="checkbox" value="ppq" v-model="hobby" />乒乓球
    <input type="checkbox" value="ymq" v-model="hobby" />羽毛球
    <input type="checkbox" value="dw" v-model="hobby" />打瓦
  </div>
</template>

<script setup>
import { ref } from "vue";
const str1 = ref("");
const city = ref("");
const blood = ref("");
const hobby = ref([]);
</script>

<style scoped></style>
